<template>
  <lay-container :fluid="true" style="padding: 10px">
    <lay-row :space="10">
      <!--      查询区-->
      <lay-col :md="24">
        <lay-card>
          <lay-form style="margin-top: 20px">
            <lay-row>
              <lay-col :md="4">
                <lay-form-item :label-width="0">
                  <lay-input
                      v-model="searchTitle.name"
                      style="width: 100%"
                  ></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col :md="6">
                <lay-form-item label-width="0">
                  <lay-button
                      type="primary"
                      style="margin-left: 10px"
                      @click="toSearch"
                  >查询
                  </lay-button
                  >
                  <lay-button @click="toSearch">重置</lay-button>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>

      <!--      列表区-->
      <lay-col :md="15">

        <lay-card>

          <template v-slot:title>
            <lay-button
                size="sm"
                type="primary"
                @click="toAdd"
            >
              <lay-icon class="layui-icon-addition"></lay-icon>
              新增
            </lay-button
            >
          </template>

          <lay-row :space="10">
            <lay-col :md="6" v-for="(item, index) in dataSource" :key="index">
              <lay-card class="card-list-item" style="">

                <template v-slot:body>
                  <div class="floorClass" @click="toFloorLevel
                  (item.id)">
                    <img
                        v-if="item.liveGender === '男'"
                        src="@/assets/hostel/宿舍楼男.png"
                        width="100"
                        height="100"
                    />

                    <img v-if="item.liveGender === '女'"
                         src="@/assets/hostel/宿舍楼女.png"
                         width="100"
                         height="100"
                    />


                    <span>{{ item.name }}</span>
                  </div>
                </template>

                <template #footer>
                  <div class="button-list">
                    <div>
                      <lay-icon type="layui-icon-flag"></lay-icon>
                    </div>
                    <div @click="edit(item)">
                      <lay-icon type="layui-icon-edit"></lay-icon>
                    </div>
                    <div @click="">
                      <lay-icon type="layui-icon-delete"></lay-icon>
                    </div>
                  </div>
                </template>
              </lay-card>
            </lay-col>
          </lay-row>
        </lay-card>


      </lay-col>

    </lay-row>

    <!--    左侧树添加-->
    <lay-layer v-model="visible11" :title="title.flag" :area="['600px', '400px']">
      <div style="padding: 20px">
        <lay-form :model="model" ref="layFormRef11" required>
          <lay-form-item label="楼号" prop="name">
            <lay-input v-model="model.name"></lay-input>
          </lay-form-item>
          <lay-form-item label="地址" prop="address">
            <lay-input v-model="model.address"></lay-input>
          </lay-form-item>
          <lay-form-item label="楼层数" prop="levelQuantity">
            <lay-input-number v-model="model.levelQuantity" :min="1" :max="10"></lay-input-number>
            <!--            <lay-input v-model="model.levelQuantity"></lay-input>-->
          </lay-form-item>
          <lay-form-item label="居住类型" prop="liveGender">
            <!--            <lay-input v-model="model.liveGender"></lay-input>-->
            <lay-radio v-model="model.liveGender" name="action" value="男" @change="">男</lay-radio>
            <lay-radio v-model="model.liveGender" name="action" value="女" @change="">女</lay-radio>
          </lay-form-item>

        </lay-form>
        <div style="width: 100%; text-align: center">
          <lay-button size="sm" type="primary" @click="toSubmit"
          >保存
          </lay-button
          >
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>

  </lay-container>


</template>

<script setup lang="ts">
import {layer} from '@layui/layer-vue'
import {ref, reactive, onMounted} from 'vue'
import {floorInsert, floorUpdate, getFloorPage} from "@/api/business/floor";
import {useRouter} from 'vue-router';

const router = useRouter();

onMounted(() => {
  fetchData();
})

const fetchData = () => {
  getFloorPage(searchTitle.value).then(res => {
    if (res.code == 0 && res.data.records.length > 0) {
      dataSource.value = res.data.records;
    }
  })
}

const layFormRef11 = ref();
const visible11 = ref(false);

const changeVisible11 = () => {
  visible11.value = !visible11.value;
}
const model = ref({
  name: '',
  address: '',
  levelQuantity: '',
  liveGender: '',

});

const title = ref({
  flag: "新增"
});

//编辑
function edit(obj: any) {
  title.value.flag = '编辑';
  changeVisible11();
  model.value = {
    id: obj.id,
    name: obj.name,
    address: obj.address,
    levelQuantity: obj.levelQuantity,
    liveGender: obj.liveGender
  }


}

function toSubmit() {
  let result = title.value.flag;
  if (result == '编辑') {
    floorUpdate(model.value).then(res => {
      if (res.code == 0) {
        changeVisible11();
        layer.msg("修改成功")
        fetchData();
      }
    })
  } else if (result == '新增') {
    floorInsert(model.value).then(res => {
      if (res.code == 0) {
        changeVisible11();
        layer.msg(res.msg)
        fetchData();
      } else {
        console.log("1111")
        layer.msg(res.msg)
      }
    })
  }

}


function toCancel() {
  changeVisible11();
}

function toAdd() {
  title.value.flag = '新增';
  model.value = {
    name: '',
    address: '',
    levelQuantity: '',
    liveGender: '',
    id: ''
  }
  changeVisible11();
}


const page = ref({total: 100, limit: 10, current: 2})

const dataSource = ref();
const searchTitle = ref({
  name: ''
})

function toSearch() {
  layer.load(2, {time: 1000})
  setTimeout(() => {
    /*
    如果点击的是学院，就是查询整个学院下面的学生
    如果点击的是班级，就是查询整个班级下面的学生
    * */
    fetchData();
  }, 1500)

}

function toReset() {
  searchTitle.value.name = ''
}

function toFloorLevel(id: number) {
  router.push({
    path: '/floor/floorlevel',
    query: {
      floorId: id,
    }
  });
}


</script>

<style scoped>
:deep(.card-list-item .layui-card-body img) {
  /*width: 100%;*/
}

:deep(.card-list-item .layui-card-body) {
  padding: 0px !important;
}

.button-list {
  display: flex;
}

.button-list > div {
  flex: 1;
  text-align: center;
  color: #909399;
}

.floorClass {
  background-color: #ffffff; /* 初始背景颜色 */
  transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

.floorClass:hover {
  background-color: #F0FFF0; /* 鼠标悬浮时的背景颜色 */
}
</style>
